<template>
  <div class="base-content WXOfficialBinding" :class="styleShow ? 'specialStyle' : ''">
    <div v-if="currentStep === 'begin'">
      <div class="before-begin" >
        <div class="wxkf-logo">
          <img src="../../../../../assets/img/wxkfLogo.png" alt=""/>
          <span>
              <p>
                {{$t('configLazyLoad.channel.WXOfficial001')}}<br/>
                {{$t('configLazyLoad.channel.WXOfficial002')}}
              </p>
          </span>
        </div>
        <div class="WXOfficial_hint">
          <span v-html="$t('configLazyLoad.channel.WXOfficial003')"></span><br/>
          {{$t('configLazyLoad.channel.WXOfficial004')}}<br/>
          <span v-html="$t('configLazyLoad.channel.WXOfficial005')"></span><br/>
          {{$t('configLazyLoad.channel.WXOfficial006')}}
        </div>
        <br/>
        <el-button type="primary" class="primary_btn" @click="addAuthorization">{{$t('configLazyLoad.channel.WXOfficial007')}}</el-button>
      </div>
      <search
          :showAdd="false"
          :showAdvSearch="false"
          :isReloadIvr="false"
          :isShowInput="false"
          :count="count"
          :currentPage="currentPage"
          :totalPage="Math.ceil(count / 10)"
          @turnPage="turnPage"
          @refresh="refresh"
      ></search>
      <el-table :data="tableData">
        <el-table-column prop="corpName" :label="$t('configLazyLoad.channel.AuthorizedEnterprise')">
        </el-table-column>
        <el-table-column prop="corpid" :label="$t('configLazyLoad.channel.EnterpriseID')">
        </el-table-column>
        <el-table-column prop="createTime" :label="$t('config.channel.bindingTime')">
        </el-table-column>
        <el-table-column prop="updateTime" :label="$t('config.channel.lastUpdateTime')">
        </el-table-column>
         <el-table-column :label="$t('public.operate')">
          <template scope="scope">
            <el-button
              @click="config(scope.row)"
              type="text"
              size="small"
              class="update">
              {{$t('configLazyLoad.intelligentQualityCheck.config')}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="editCustomer" v-if="currentStep === 'updateCustomer'">
      <bread-crumb :titleArr="titleArr" @back="back"></bread-crumb>
      <account-list :data="listData" :corpid="corpid" :titleArr="titleArr"></account-list>
      <!-- <updateWXCustomer @back="back" :data="updateData" :corpid="corpid"></updateWXCustomer> -->
    </div>
  </div>
</template>
<script>
import search from '../base/search.vue'
import breadCrumb from '../../../../ui-modules/breadCrumb/BreadCrumbConfig.vue'
import updateWXCustomer from './updateWXCustomer.vue'
import accountList from './accountList.vue'
import { deepClone } from '@/utils/m7Utils'
import bus from '@/store/eventBus'
export default {
  name: 'authorization',
  data () {
    return {
      msg: '123',
      currentStep: 'begin',
      count: 0,
      tableData: [],
      currentPage: 1,
      corpid: '',
      todo: 'add',
      updateData: {},
      listData:[],
      titleArr: [this.$t('configLazyLoad.channel.WXkfAuthorized'), this.$t('public.edit')],
      styleShow: false
    }
  },
  methods: {
    addAuthorization () {
      this.$store.dispatch('getWxkfAuthUrl', {}).then(req => {
        if (req && req.success) {
          window.open (req.wxkfAuthUrl, '_blank') 
          console.log(req)
        }
      })
    },
    refresh () {
      this.currentPage = 1
      this.fetchData()
      this.styleShow = false
    },
    turnPage (val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData (val) {
      var data = {
        page: this.currentPage,
        limit: 10
      }
      this.$store.dispatch("getWxkfWorkConfigs", data).then(req => {
        if (req && req.success) {
          if (req.list) {
           this.tableData = deepClone(req.list)
          } else {
            this.tableData = []
          }
          this.count = req.count
        }
      })
    },
    config(row){
      this.currentStep = 'updateCustomer'
      this.corpid = row.corpid
      this.titleArr = [this.$t('configLazyLoad.channel.WXkfAuthorized'), this.$t('configLazyLoad.channel.configuringCustomerAccount')]
      this.listData = row.kfAccountList
      this.styleShow = true
      let dom = document.getElementsByClassName('base-content')[0]
      dom.scrollTop = 0
    },
    back () {
      this.currentStep = "begin"
      this.updateData = {}
      this.corpid = ''
      this.refresh()
    }
  },
  components: {
    search,
    breadCrumb,
    updateWXCustomer,
    accountList
  },
  mounted () {
    this.fetchData()
    bus.$on('refreshWxkfAccessList', (data) => {
      this.refresh()
    })
  },
  beforeDestroy () {
    bus.$off('refreshWxkfAccessList')
  }
}
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .specialStyle
    overflow-y hidden !important
  .base-content
    height calc(100vh - 170px)
    overflow-y auto
    text-align center
    .before-begin
      margin 25px
      background #f2f6fa
      >p
        margin-bottom 34px
        font-size 14px
        line-height 18px
      .el-button
        margin-bottom 28px
      .wxkf-logo
        padding 34px 0 10px 0
        display table
        margin 0 auto
        span
          display table-cell
          vertical-align middle
          margin-left 10px
          p
            line-height 1.8
            margin-left 14px
            text-align left
    .editCustomer
      padding 20px
      overflow-y none !important
      .breadCrumb
        text-align left
      .title
        font-size 24px
        font-weight 700px
        margin 20px 0
      .wechatType
        padding 20px
        text-align: center
        .wechatoption
          text-align left
          width 140px
          display inline-block
          p
            color $cf-gray4
            padding-left 20px
  .WXOfficial_hint
    text-align left
    display inline-block
    margin-bottom 20px
  .update
    max-width 100px
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
  .del
    color $c-pink
    cursor pointer
</style>